<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>Weather</title>
		<link rel="stylesheet" href="css/framework7.min.css">
		<link rel="stylesheet" href="css/ionicons.min.css">
		<style>
			*{
				font-family: "microsoft yahei";
			}
			i.icon{
				margin-top:-5px;
			}
			.nomargin {
				margin: 3px !important
			}
			.temp {
				text-align: center;
			}
			.thermometer {
				font-size: 32px;
				margin: 0 10px;
			}
			.footer {
				text-align: center;
				color: #aaa;
			}
			.card-header{
				background:#63b8f0;
				color:#fff;
			}
		</style>
	</head>

	<body>
		<div class="statusbar-overlay"></div>
		<div class="views">
			<div class="view view-main">
				<div class="navbar">
					<div class="navbar-inner">
						<div class="center sliding"><i class="icon ion-ios-cloud-outline" style="margin-right: 10px;"></i> 天气</div>
						<div class="right">
							<!--refresh-->
							<a data-popup=".popup-add" class="open-popup icon ion-plus"></a>
						</div>
					</div>
				</div>
				<div class="pages navbar-through">
					<div class="page" data-page="index">
						<div class="page-content pull-to-refresh-content">
							<!-- 下拉刷新层 -->
							<div class="pull-to-refresh-layer">
								<div class="preloader"></div>
								<div class="pull-to-refresh-arrow"></div>
							</div>
							<div class="list-block nomargin cards-list">
								<ul id="city"></ul>
							</div>
							<div class="content-block-title footer">使用Framework7开发</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--热门城市列表-->
		<div class="popup popup-add">
			<div class="view view-popup navbar-fixed">
				<div class="navbar">
					<div class="navbar-inner">
						<div class="left">
							<a class="close-popup icon ion-close"></a>
						</div>
						<div class="center sliding">添加城市</div>
					</div>
				</div>
				<div class="pages">
					<div class="page">
						<div class="page-content">
							<div id="hotCityList" class=""></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/template7" id="indexTemplate">
			{{#each this}}
			<li class="swipeout" data-id="{{@index}}">
				<div class="swipeout-content card nomargin">
					<div class="card-header">
						<span><i class="icon ion-location"></i> {{this.city}}</span>
					</div>
					<div class="card-content">
						<div class="card-content-inner temp">
							<h1 class="nomargin">{{this.weather}} </h1>
							<h1 class="nomargin">{{this.temp}} °C</h1>
							<p>最高气温：{{this.h_tmp}} °C
								<span class="thermometer"><i class="icon ion-thermometer"></i></span> 最低气温：{{this.l_tmp}}°C
							</p>
							<p><i class="icon ion-clock"></i> 日出时间：{{this.sunrise}} </p>
							<p><i class="icon ion-clock"></i> 日落时间：{{this.sunset}} </p>
						</div>
					</div>
				</div>
				<div class="swipeout-actions-right">
					<a href="#" class="swipeout-delete swipeout-overswipe">删除</a>
				</div>
			</li>
			{{/each}}
		</script>
		<script type="text/template7" id="cityTemplate">
			<div class="list-block nomargin">
				<ul>
					{{#each this}}
					<li class="item-content cityItem" _value="{{this}}">
						<div class="item-inner">
							<div class="item-title">{{this}}</div>
						</div>
					</li>
					{{/each}}
				</ul>
			</div>
		</script>
		<script type="text/javascript" src="js/framework7.min.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
	</body>

</html>